<template>
    <div id="add-edit-industrial-disease">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="769px" 
            :before-close="handleClose"
            :destroy-on-close="true"
            @close="clean"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="80px" :rules="rules">
                <el-row :gutter="35">

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('iNydh9Q0Yyowmmjfi6Awm')" prop="v_Name" :label-width="formLabelWidth">
                            <el-input v-model="ruleForm.v_Name" :placeholder="$t('iNydh9Q0Yyowmmjfi6Awm')" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('hQmmlRmkje2IkDoxRZjj')" prop="v_WorkType_Name" :label-width="formLabelWidth">
                            <el-input v-model="ruleForm.v_WorkType_Name" :placeholder="$t('hQmmlRmkje2IkDoxRZjj')" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('xOaHzmzeAcLtJyLnxdI0M')" prop="n_Type" :label-width="formLabelWidth">
                            <el-select 
                                v-model="ruleForm.n_Type" 
                                filterable 
                                class="m-2" 
                                :placeholder="$t('h0b9hG7bs9r7eLnDo2Wgo')" 
                                value-key="id"
                            >
                                <el-option
                                    v-for="item in typeOption"
                                    :key="item.id"
                                    :label="item.value"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('4qSllUxIkPaA8Rqf3Jg8y')" :label-width="formLabelWidth">
                            <el-switch
                                v-model="ruleForm.n_isValid"
                                active-color="#07AAF9"
                                inactive-color="#FF5F33"
                                inline-prompt
                                :active-text="$t('iPfonvtxVLm7knSyCsLBo')"
                                :inactive-text="$t('tzm8JwYsKnqKoNhheJlJx')"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('l4vGAiubhrTaPWe5vDq1o')" prop="v_Content1" :label-width="formLabelWidth">
                            <el-input type="textarea" v-model="ruleForm.v_Content1" :placeholder="$t('l4vGAiubhrTaPWe5vDq1o')" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('nYvXL3dXVqLGwGqzfbWi')" prop="v_Content2" :label-width="formLabelWidth">
                            <el-input type="textarea" v-model="ruleForm.v_Content2" :placeholder="$t('wo1Gilb9QpibTWqp4ZZmU')" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('lZOJoKdfEwn3fWiUHcx6')" prop="v_Content3" :label-width="formLabelWidth">
                            <el-input type="textarea" v-model="ruleForm.v_Content3" :placeholder="$t('fewOvEWeH5TgUAf5Hqrs')" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('9RLaVEiJf1Z1Qv15o6Kll')" :label-width="formLabelWidth">
                            <el-input v-model="ruleForm.v_Remark" type="textarea" :placeholder="$t('9RLaVEiJf1Z1Qv15o6Kll')" clearable />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="cancelUseClick">{{ $t('yk_2HiWXbUkfQ7F6e3kXw') }}</el-button>
                <el-button type="primary" :loading="repeatDis" :disabled="repeatDis" @click="submitForm(ruleFormRef)">{{ $t('zdZCl09qrTjuPhYzWz7L') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import { OccupationalAdd , OccupationalUpdate , sysDictDataList , WorkTypeGetList } from '/@/api/sms/sms';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    v_Name: String, // 职业病名称
    v_WorkType_Name: String, // 工种名称
    v_Content1: String, // 基本信息
    v_Content2: String, // 内容
    v_Content3: String, // 预防
    n_Type: Number | String, // 预防
    n_isValid: Boolean, // 是否启用 1启用/2禁用
    v_Remark: String, // 备注
}
export default defineComponent( {
    name: 'add-edit-industrial-disease',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const { proxy } = useCurrentInstance();
        const $t = proxy.$t;
        
        const titleCon = ref()
        const ruleFormRef = ref()
        const typeOption: any = ref([])
        const workOption: any = ref([])

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            // 职业病名称
            v_Name: [
				{ required: true, message: $t('iNydh9Q0Yyowmmjfi6Awm'), trigger: 'blur' },
			],
            // 工种名称
            v_WorkType_Name: [
				{ required: true, message: $t('hQmmlRmkje2IkDoxRZjj'), trigger: 'blur' },
			],
            // 基本信息
            v_Content1: [
				{ required: true, message: $t('l4vGAiubhrTaPWe5vDq1o'), trigger: 'blur' },
			],
            // 内容
            v_Content2: [
				{ required: true, message: $t('tVblPoNDedznaxCfwQeh'), trigger: 'blur' },
			],
            // 预防
            v_Content3: [
				{ required: true, message: $t('rbr8ljxF4Zdmu1sppr4dU'), trigger: 'blur' },
			],
            // 职业病类型
            n_Type: [
				{ required: true, message: $t('5W5eGr1StKXjFvwoYcHe'), trigger: 'change' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelUseClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelUseClick')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    let getData = toRaw(state.ruleForm)
                    let param:any = {}
                    getData.n_isValid ? param.n_isValid = 1 : param.n_isValid = 2
                    const { n_isValid , ...getArr} = getData
                    let valObj = {...getArr,...param}
                    if(props.repairInfo === ''){
                        state.repeatDis = true
                        let res:any = await OccupationalAdd(valObj)
                        if(res.success){
                            ctx.emit('updateData')
                            ctx.emit('controlUseClick')
                            state.repeatDis = false
                        }
                    }else{
                        state.repeatDis = true
                        let res:any = await OccupationalUpdate(valObj)
                        if(res.success){
                            ctx.emit('updateData')
                            ctx.emit('controlUseClick')
                            state.repeatDis = false
                        }
                    }
                }else{
                    console.log('error submit!')
					return false
                }
            })
        }

        /*** clean 清空数据 */
        const clean = () => {
            ruleFormRef.value.resetFields()
        }

        /*** typeChange 类型改变事件 */
        const typeChange = () => {}

        /*** getInfo 获取数据 */
        const getInfo = async () => {
            let res:any = await sysDictDataList({ typeCode: 'sms_occupate_type' })
            // let workRes = await WorkTypeGetList()
            if(res.success){ typeOption.value = res.data }
            // if(workRes.success){ workOption.value = workRes.data; console.log(workRes.data,'workRes') }
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                state.repeatDis = false
                getInfo()
                if(props.repairInfo !== ''){
                    titleCon.value = $t('b83sUyFRqWIhO1X1xxwhC')
                    let setPara:any = {}
                    let getData = JSON.parse(props.repairInfo)
                    getData.n_isValid === 1 ? setPara.n_isValid = true : setPara.n_isValid = false
                    const {
                        n_isValid , 
                        n_FileId ,
                        tenantId , 
                        isDeleted , 
                        updatedTime , 
                        updatedUserId , 
                        updatedUserName ,
                        createdTime ,
                        createdUserId ,
                        createdUserName ,
                        ...setData} = getData
                    state.ruleForm = { ...setPara , ...setData }
                }else{
                    titleCon.value = $t('w4dyKdalGlmq6BkxOjP7Q')
                    state.ruleForm.v_Name = '' // 职业病名称
                    state.ruleForm.v_WorkType_Name = '' // 工种名称
                    state.ruleForm.v_Content1 = '' // 基本信息
                    state.ruleForm.v_Content2 = '' // 内容
                    state.ruleForm.v_Content3 = '' // 预防
                    state.ruleForm.n_Type = '' // 预防
                    state.ruleForm.n_isValid = true // 是否启用 1启用/2禁用
                    state.ruleForm.v_Remark = '' // 备注
                }
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            clean,
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            rules,
            formLabelWidth: '120px',
            typeChange,
            typeOption,
            workOption,
        }
    },
} )
</script>
<style scoped lang="scss">
    :deep(.el-select){
        width: 100%!important;
    }
</style>